{% load static %}

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>VIP</title>
    <link rel="shortcut icon" type="image/png" href="https://res.yyzb.com/haibao_icon_xs.png"/>
    <link href="{% static 'css/project.css' %}" rel="stylesheet">
</head>

<body class="black-background">
    <div class="vip-bg">
        <div align="center" class="vip-black-background">
            <div class="vip-head">
                {% if is_vip %}
                    <img src="{% static 'img/06_vip/06_top_bar_01.jpg' %}"/>
                {% else %}
                    <img src="{% static 'img/06_vip/06_top_bar_02.jpg' %}"/>
                {% endif %}
            </div>

            {% if message %}
            <div class="vip-status">
                <p>{{ message }}</p>
            </div>
            {% endif %}

            <div class="vip-privilege">
                <img src="{% static 'img/06_vip/06_vip_privilege.png' %}" />
            </div>

            <div class="vip-cards">
                <img id="card1" class="vip-card" src="{% static 'img/06_vip/06_card_01.png' %}" onclick="javascript:selectVipCard(1)" />
                <img id="card2" class="vip-card" src="{% static 'img/06_vip/06_card_02.png' %}" onclick="javascript:selectVipCard(2)" />
                <img id="card3" class="vip-card" src="{% static 'img/06_vip/06_card_03s.png' %}" onclick="javascript:selectVipCard(3)" />
                <img id="card4" class="vip-card" src="{% static 'img/06_vip/06_card_04.png' %}" onclick="javascript:selectVipCard(4)" />
            </div>

            <div class="vip-buy-button">
                <a id="open-link" href="javascript:call_native_function('activity_buy_vip_card', 3)">
                    <img src="{% static 'img/06_vip/06_buy_button.png' %}"/>
                </a>
            </div>
        </div>
    </div>

    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script src="{% static 'js/project.js' %}"></script>

    <script>
        function selectVipCard(card_type)
        {
            $('#card1').attr('src', "{% static 'img/06_vip/06_card_01.png' %}");
            $('#card2').attr('src', "{% static 'img/06_vip/06_card_02.png' %}");
            $('#card3').attr('src', "{% static 'img/06_vip/06_card_03.png' %}");
            $('#card4').attr('src', "{% static 'img/06_vip/06_card_04.png' %}");

            if (card_type === 1) {
                $('#card1').attr('src', "{% static 'img/06_vip/06_card_01s.png' %}");
                $('#open-link').attr('href', "javascript:call_native_function('activity_buy_vip_card', 1, '68')");
            } else if (card_type === 2) {
                $('#card2').attr('src', "{% static 'img/06_vip/06_card_02s.png' %}");
                $('#open-link').attr('href', "javascript:call_native_function('activity_buy_vip_card', 2, '98')");
            } else if (card_type === 3) {
                $('#card3').attr('src', "{% static 'img/06_vip/06_card_03s.png' %}");
                $('#open-link').attr('href', "javascript:call_native_function('activity_buy_vip_card', 3, '168')");
            } else if (card_type === 4) {
                $('#card4').attr('src', "{% static 'img/06_vip/06_card_04s.png' %}");
                $('#open-link').attr('href', "javascript:call_native_function('activity_buy_vip_card', 4, '588')");
            }
        }
    </script>
</body>

</html>
